<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>连连看画面</title>
		<style>
		   td:hover{
			   background-color: aqua;
		   }
		</style>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function(){
				//定义定时器
				var timer;
				//获取游戏的总时长(转换成数字)
				var Totaltime = parseInt($("#Timeremaining").html());
				//定义一个定时器函数进行调用
				function startTimer(){
					//clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
					clearInterval(timer);
					//倒计时
					//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
					//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
					timer =setInterval(function(){
						Totaltime--;
						$("#Timeremaining").html(Totaltime);
						if(Totaltime==0){
							alert("你真笨啊！！");
							//取消由 setInterval() 函数设定的定时执行操作
							clearInterval(timer);
							//window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
							window.location ="主页面.html";
						}
					},1000);
				}
				//调用定时器函数
				startTimer();
				
				//开始将测试的所有成语进行处理
				var words =
				"万象更新,抱头鼠窜,鸡鸣狗盗,千军万马,亡羊补牢,杯弓蛇影,鹤立鸡群," +
				"对牛弹琴,如鱼得水,鸟语花香,为虎作伥,黔驴技穷,画龙点睛,鼠目寸光," +
				"虎背熊腰,守株待兔,鹤发童颜,狗急跳墙,盲人摸象,画蛇添足,眼高手低," +
				"目瞪口呆,胸无点墨,头重脚轻,手足情深,口是心非,手疾眼快,耳闻目睹," +
				"头破血流,眉清目秀,袖手傍观,口出不逊,春光明媚,万紫千红,春雨如油," +
				"生机勃勃,春色满园,春意盎然,鸟语花香,春暖花开,百花齐放,和风细雨," +
				"前呼后拥,东倒西歪,眼高手低,口是心非,头重脚轻,有头无尾,前倨后恭," +
				"东逃西散,南辕北辙,左顾右盼,积少成多,同甘共苦,半信半疑,大材小用," +
				"先人后己,有口无心,天经地义,弄假成真,举足轻重,南腔北调,声东击西," +
				"转危为安,东倒西歪,反败为胜,以少胜多,由此及彼";
				 //因为最后的效果是8x8的随机打乱，所以需要对以上成语进行切割
				 //第一步，以四字成语进行切割,返回的是一个数组。
				 words =words.split(",");
				 //随机抽取16个成语作为题目==>64个字==>8x8的框
				 //第二步：定一个数组存放16个成语
				 var Randomlyselected = [];
				 for(var i =1;i<=16;){
					 //随机下标-->向上转型0-1随机数*words数组的长度=0-68的随机下标
					var idx = Math.floor(Math.random()*words.length);
					//传入下标
					var word =words[idx];
					 //为了避免重复，这里需要进行判断！！！
					 //$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
					 //$.inArray( value, array [, fromIndex ] )
					 if($.inArray(word,Randomlyselected)==-1){
						 //push()数组末尾添加元素
						 Randomlyselected.push(word);
						 i++;
					 }
				 }
				 //----现在已经得到一个包含16个成语的Randomlyselected的数组
				 //继续进行切割打乱
				 //第三步：把包含16个成语的Randomlyselected的数组中的成语全部取出来分成一个一个的字,存放到一个数组
				 var singleWords =[];
				 //遍历Randomlyselected的数组，取出每一个四字成语
				 for(var i =0;i<Randomlyselected.length;i++){
					 //遍历每一个四字成语，取出每一个字
					 for(var j=0;j<Randomlyselected[i].length;j++){
						 singleWords.push(Randomlyselected[i].charAt(j));
					 }
				 }
				 //第四步：随机打乱singleWords数组
				 //定义随机打乱数组的方法
				 function shuffle(a) {
				        var len = a.length;
				        for(var i=0;i<len;i++){
				            var end = len - 1 ;
				            var index = (Math.random()*(end + 1)) >> 0;
				            var t = a[end];
				            a[end] = a[index];
				            a[index] = t;
				        }
				        return a;
				    };
				//调用自定义的随机打乱字符串的方法
				singleWords =shuffle(singleWords);
				//----------------------------------------------
				//第五步：将准备好的数据渲染到页面当中==>8*8的一个表格
 				//组成标签table
				// 	tr 行
				// 	td 列(单元格)
				// 	th 列(加粗居中单元格)
				//定义下标
				var curIdx =0;
				//定义标签变量
                var label = "";
				//控制行数==>8 <tr>
				for(var i =0;i<8;i++){
					//添加行标签
					label += "<tr>";
					//控制列数==>8 <td>
					for(var j=0;j<8;j++){
						//自定义标签属性，添加列标签
						label +="<td is-selected='0'>" + singleWords[curIdx++] + "</td>";
					}
					label +="</tr>";
				}
				//在table标签后进行拼接
				$("#data").append(label);
			});
		</script>
	</head>
	<body>
		<div class="main">
			<table id="data">
		
			</table>
			<div class="functionArea">
				<input type="text" disabled="disabled">
				<input type="text" disabled="disabled">
				<input type="text" disabled="disabled">
				<input type="text" disabled="disabled">
				<br />
				<p>剩余时间:</p>
				<span id="Timeremaining">600</span>
			</div>
		</div>
	</body>
</html>
